<section>
  <header><h3>一般工具提示</h3></header>
  <article>
    <div class="example tooltip-demo">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore,
      cupiditate, eius, modi, veniam iure perspiciatis hic vitae quisquam ullam
      animi ipsum repellat temporibus <a href="#" data-toggle="tooltip" title=
      "This is a tooltip">have a</a> officiis voluptatibus nostrum laborum debitis
      quidem illo deleniti iste! Minima, facilis aut explicabo debitis fugit dolor
      sint at soluta nulla omnis itaque <a href="#" data-toggle="tooltip" title=
      "Another tooltip">have a</a> illum commodi numquam enim quod architecto
      molestias qui eveniet et amet <a href="#" data-toggle="tooltip" title=
      "Another tooltip">have a</a> laborum quisquam quam provident esse beatae quas
      impedit voluptas nostrum <a href="#" data-toggle="tooltip" title=
      "Another tooltip">have a</a> aspernatur deleniti suscipit blanditiis
      dignissimos temporibus eligendi quae corrupti <a href="#" data-toggle=
      "tooltip" title="Another tooltip">have a</a> pariatur quo! Enim, ipsa, odio
      quasi laboriosam provident id nihil maxime architecto dolorum quas harum
      veniam perspiciatis tempora ducimus qui! Rem, obcaecati reiciendis officia
      quam.</p>
    </div>
  </article>
</section>

<section>
  <header><h3>不同方向的提示</h3></header>
  <article>
    <div class="example tooltip-demo">
      <button type="button" class="btn btn-default" data-toggle="tooltip"
      data-placement="left" title="" data-original-title=
      "Tooltip on left">左侧Tooltip</button> <button type="button" class=
      "btn btn-default" data-toggle="tooltip" data-placement="top" title=""
      data-original-title="Tooltip on top">上方Tooltip</button> <button type="button"
      class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title=
      "" data-original-title="Tooltip on bottom">下方Tooltip</button> <button type=
      "button" class="btn btn-default" data-toggle="tooltip" data-placement="right"
      title="" data-original-title="Tooltip on right">右侧Tooltip</button>
    </div>
  </article>
</section>

<section>
  <header><h3>使用提醒</h3></header>
  <article>
    <ul>
      <li>选择性加入的功能：出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说 <strong>你必须自己初始化他们</strong>。</li>
      <li>工具提示与按钮组和输入框组联合使用时需要一些特殊设置：在 <code>.btn-group</code> 或 <code>.input-group</code> 内的元素上使用工具提示时，你需要指定 <code>container: &#39;body&#39;</code>选项以避免不需要的副作用（例如，当工具提示显示之后，与其合作的页面元素可能变得更宽或是去圆角）。</li>
      <li>在禁止使用的页面元素上使用工具提示时需要额外增加一个元素将其包裹起来：为了给 <code>disabled</code> 或 <code>.disabled</code> 元素添加工具提示，将需要增加工具提示的页面元素包裹在一个 <code>&lt;div&gt;</code> 中，然后对这个 <code>&lt;div&gt;</code> 元素应用工具提示。</li>
    </ul>
  </article>
</section>

<section>
  <header><h3>用法</h3></header>
  <article>
    <p>通过JavaScript激活工具提示：</p>
    <div class="example">
      <pre><code class="language-js">$(<span class="string">&#39;#example&#39;</span>).tooltip();</code></pre>
    </div>
  </article>
</section>

<section>
  <header><h3>选项</h3></header>
  <article>
    <p>可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到 <code>data-</code> 之后，例如
    <code>data-animation=&quot;&quot;</code> 。</p>
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th style="width: 100px;">名称</th>
            <th style="width: 100px;">类型</th>
            <th style="width: 50px;">默认值</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>animation</td>
            <td>boolean</td>
            <td>true</td>
            <td>决定是否应用淡入淡出动画。</td>
          </tr>
          <tr>
            <td>html</td>
            <td>boolean</td>
            <td>false</td>
            <td>是否允许展示html标签。</td>
          </tr>
          <tr>
            <td>placement</td>
            <td>string | function</td>
            <td>&#39;top&#39;</td>
            <td>top | bottom | left | right | auto.
            <br>
            显示的位置。</td>
          </tr>
          <tr>
            <td>selector</td>
            <td>string</td>
            <td>false</td>
            <td>当需要为动态DOM应用工具提示，需要手动指定选择器。</td>
          </tr>
          <tr>
            <td>title</td>
            <td>string | function</td>
            <td>&#39;&#39;</td>
            <td>标题。</td>
          </tr>
          <tr>
            <td>trigger</td>
            <td>string</td>
            <td>&#39;hover focus&#39;</td>
            <td>click | hover | focus | manual. 触发方式。</td>
          </tr>
          <tr>
            <td>delay</td>
            <td>number | object</td>
            <td>0</td>
            <td>
              <p>如果指定，则应用延迟。</p>
              <p><code>delay: { show: 500, hide: 100 }</code></p>
            </td>
          </tr>
          <tr>
            <td>container</td>
            <td>string | false</td>
            <td>false</td>
            <td>
              <p>决定相对位置的父级容器。 <code>container: &#39;body&#39;</code></p>
            </td>
          </tr>
        </tbody>
      </table>
    </div><!-- /.table-responsive -->
    <p>使用data属性可以为单个工具提示指定额外选项，如下所示。</p>    
  </article>
</section>

<section>
  <header><h3>标记</h3></header>
  <article>
    <div class="example">
      <pre><code class="language-html">&lt;a href=&quot;#&quot; data-toggle=&quot;tooltip&quot; title=&quot;first tooltip&quot;&gt;Hover over me&lt;/a&gt;</code></pre>
    </div>
  </article>
</section>

<section>
  <header><h3>方法</h3></header>
  <article>
    <h4>$().tooltip(options)</h4>
    <p>为一组元素应用工具提示。</p>
    <h4>.tooltip(&#39;show&#39;)</h4>
    <p>展示工具提示。</p>
    <div class="example">
      <pre><code>$(&#39;#element&#39;).tooltip(&#39;show&#39;);</code></pre>
    </div>
    <h4>.tooltip(&#39;hide&#39;)</h4>
    <p>隐藏工具提示。</p>
    <div class="example">
      <pre><code>$(&#39;#element&#39;).tooltip(&#39;hide&#39;);</code></pre>
    </div>
    <h4>.tooltip(&#39;toggle&#39;)</h4>
    <p>展示或隐藏工具提示。</p>
    <div class="example">
      <pre><code>$(&#39;#element&#39;).tooltip(&#39;toggle&#39;);</code></pre>
    </div>
    <h4>.tooltip(&#39;destroy&#39;)</h4>
    <p>隐藏并销毁工具提示。</p>
    <div class="example">
      <pre><code>$(&#39;#element&#39;).tooltip(&#39;destroy&#39;);</code></pre>
    </div>
  </article>
</section>

<section>
  <header>
    <h3>事件</h3>
  </header>
  <article>
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th style="width: 150px;">事件类型</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>show.zui.tooltip</td>
            <td>当 <code>show</code> 方法被调用之后，此事件将被立即触发。</td>
          </tr>
          <tr>
            <td>shown.zui.tooltip</td>
            <td>当工具提示展示到用户面前之后（同时CSS过渡效果执行完之后）此事件被触发。</td>
          </tr>
          <tr>
            <td>hide.zui.tooltip</td>
            <td>当 <code>hide</code> 方法被调用之后，此事件被触发。</td>
          </tr>
          <tr>
            <td>hidden.zui.tooltip</td>
            <td>当工具提示被隐藏之后（同时CSS过渡效果执行完之后），此事件被触发。</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="example">
      <pre><code class="language-js"></code></pre>
    </div>
  </article>
</section>

<script>
function afterPageLoad() {
    $('#pageContent [data-toggle="tooltip"]').tooltip();
}
</script>
